<template>
    <div id="ClassAverageEchart">
        ClassAverageEchart
    </div>
</template>
<script setup>
import * as echarts from 'echarts';
import { onMounted } from 'vue'
const props = defineProps(["data"])
console.log(props.data);
const getAverage = (studentData, tagData, classId) => {
    const currentClass = studentData.filter(item => item.class._id === classId)

    // console.log(currentClass)
    const average = []

    tagData.forEach(({ title }, index) => {
        var filterArr = currentClass.filter(item => item.score[title])

        average[index] = (filterArr.map(item => item.score[title]).reduce((total, item) => total + item, 0) / (filterArr.length || 1)).toFixed(2)
    })
    return average
}
const handleWith = ({ classData, studentData, tagData }) => {
    const source = []
    const series = []
    source.push([
        "tags",
        ...tagData.map(item => item.title)
    ])

    classData.forEach(item => {
        const arr = [item.title, ...getAverage(studentData, tagData, item._id)]
        source.push(arr)
        series.push({
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
        })
    });
    series.push({
        type: 'pie',
        id: 'pie',
        radius: '30%',
        center: ['50%', '25%'],
        emphasis: {
            focus: 'self'
        },
        label: {
            formatter: '{b}班: {@HTML5}分',
            color: '#fff'
        },
        encode: {
            itemName: 'tags',
            value: 'HTML5',
            tooltip: 'HTML5'
        }
    })
    console.log(source);
    return { source, series }
}
onMounted(() => {

    var myChart = echarts.init(document.getElementById('ClassAverageEchart'));
    const { source, series } = handleWith(props.data)
    var option = {
        title: [
            {
                text: '各班级Tag平均值',
                textStyle: {
                    fontSize: 14,
                    color: 'white'
                }
            }
        ],
        legend: {
            textStyle: {
                fontSize: 14,
                color: 'white'
            }
        },
        tooltip: {
            trigger: 'axis',
            showContent: false
        },
        dataset: {
            source: source
        },
        xAxis: {
            type: 'category',
            axisLabel: {
                interval: 0,
                rotate: 50
            },
            axisLine: {
                lineStyle: {
                    color: "#fff"
                }
            }
        },
        yAxis: {
            gridIndex: 0,
            axisLine: {
                lineStyle: {
                    color: "#fff"
                }
            }
        },
        grid: { top: '55%' },
        series: series,
        colorBy:"source",
        color: ['#5470c6',
            '#91cc75',
            '#fac858',
            '#ee6666',
            '#73c0de',
            '#3ba272',
            '#fc8452',
            '#9a60b4',
            '#ea7ccc']
    };
    myChart.on('updateAxisPointer', function (event) {
        const xAxisInfo = event.axesInfo[0];
        if (xAxisInfo) {
            const dimension = xAxisInfo.value + 1;
            myChart.setOption({
                series: {
                    id: 'pie',
                    label: {
                        formatter: '{b}班: {@[' + dimension + ']}分'
                    },
                    encode: {
                        value: dimension,
                        tooltip: dimension
                    }
                }
            });
        }
    });
    //   myChart.setOption(option);
    myChart.setOption(option)
})
</script>
<style scoped lang='scss'>
#ClassAverageEchart {
    background: url("../../assets/t_bg.png") no-repeat center;
    background-size: 100% 100%;
    height: 650px;
}
</style>